<template>
	<view class="login-page">
		<image src="../../static/images/微信图片_20210805153020.jpg" class="img"></image>
		<view class="title">
			<text class="title_first">只愿得一人心</text>
			<text class="titile_second">之人间不值得</text>
		</view>
		<view class="form-view">
			<uni-forms ref="form">
				<uni-forms-item class="form-item" name="userName">
					<input type="text" v-model="userData.userName" placeholder="请输入您的账号" />
				</uni-forms-item>
				<uni-forms-item class="form-item" name="password">
					<input type="password" v-model="userData.password" placeholder="请输入您的密码" />
				</uni-forms-item>
				<button class="login-btn" hover-class="btn-active" @click="toLogin">登录</button>
			</uni-forms>
			<div class="register">没有账号？<span class="to-link" @click="toRegister">去注册</span></div>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				userData: {}
			}
		},
		onLoad() {
			// 判断是否已经登录，如果是直接跳转首页
			let userData
			uni.getStorage({
				key: 'userData',
				success: (res) => {
					userData = res.data
				}
			})
			if (userData) {
				this.LOGIN(userData)
				uni.switchTab({
					url: '../index/index'
				})
			}
		},
		methods: {
			
			// 跳转去注册页面
			toRegister(){
				uni.navigateTo({
					url: '../register/register'
				})
			},
			
			// 验证登录
			toLogin() {
				uni.showLoading({
					title: '登录中...'
				})
				if (this.userData.userName && this.userData.password) {
					  uni.request({
					  	url:'http://1.15.170.70:7500/api/login',
									data: {
										username:this.userData.userName,
										password:this.userData.password
									},
									method: 'POST',
									header: {
										'content-type': 'application/x-www-form-urlencoded',
										// 'token': "",
										// 'Authorization':'',
									},
									success: (res) => {
										  if(res.statusCode==200 && res.data.status==0) {
											  const _userData = {
												  token: res.data.token,
												  data: res.data.data
											  }
											  this.LOGIN(_userData)
											  console.log(this.$store.state.userName);
											  uni.setStorage({
											  	key: 'userData',
											  	data: _userData,
											  	success: () => {
											  		console.log('userData保存成功');
											  	}
											  })
										  }
										  else {
											  console.log('失败！！！！！！！！');
										  }
									}
									
									
					  })
					uni.hideLoading()
					uni.showToast({
						title: '登录成功'
					})
					this.userData = {} // 清空输入框
					if (this.$store.state.isFirstLogin && !this.$store.state.userIdentity.name) {
						// this.SET_FIRSTLOGIN(false)
						uni.navigateTo({
							url: '../../mainPages/firstLogin/identity'
						})
					} else {
						uni.switchTab({
							url: '../index/index'
						})
					}
				} else {
					uni.hideLoading()
					uni.showToast({
						title: '请输入账号密码',
						icon: 'error'
					})
				}
			},
			
			...mapMutations(['LOGIN', 'SET_FIRSTLOGIN'])
		}
	}
</script>

<style lang="scss" scoped>
	.login-page {
		position: relative;
		width: 100vw;
		height: 100vh;
		min-height: calc(100vh - 173rpx);

		.img {
			width: 100%;
			height: 100%;
		}

		.title {
			position: absolute;
			left: 6%;
			top: 7%;
			width: 90vw;
			color: aliceblue;
			font-size: 4vh;
			-webkit-text-stroke: 1.5px #000;
			font-weight: bold;
			font-style: oblique;

			.titile_second {
				position: absolute;
				left: 200rpx;
				top: 100rpx;
			}
		}

		.form-view {
			position: absolute;
			left: 5%;
			bottom: 8%;
			width: 90%;
			height: 400rpx;
			background-color: rgba(255, 255, 255, 0.7);
			border-radius: 20rpx;
			padding-bottom: 20rpx;
			.form-item {
				margin: 20px;
				height: 70rpx;
				border-radius: 10rpx;
				background-color: rgba(255, 255, 255, 0.75);

				input {
					margin-left: 15rpx;
					height: 70rpx;
				}
			}

			.login-btn {
				margin: 6px 20px;
				color: #fff;
				background-color: #1a73e8;
				&.btn-active {
					background-color: #1c67df;
				}
			}
			.register {
				position: absolute;
				right: 50rpx;
				.to-link {
					color: #1a73e8
				}
			}
		}
	}
</style>
